<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Css Sprites(CSS精灵) - 通常被解释为“CSS图像拼合”或“CSS贴图定位”。</title>
	<link rel="stylesheet" type="text/css" href="css/sprites.css"/>
</head>
<body>
	<div class="title">
		<h1>Css Sprites(CSS精灵)</h1>
		<p class="txtp">通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。</p>
	</div>
	
	<div class="demo">
		<h1>以下示例供参考</h1>
		<!--div.democont>span[class="nav image$"]*6-->
		<p><b>关键：</b>背景background-position有两个数值，前一个代表靠左距离值（可为正可为负），第二个数值代表靠上距离值（可为正可为负）
背景background-position有两个数值可以为正可以为负，当为正数时，代表背景图片作为对象盒子背景图片时靠左和考上多少距离多少开始显示背景图片；当为负数时代表背景图片作为盒子对象背景图片，将背景图片拖动超出盒子对象左边多远，拖动超出盒子对象上边多远开始显示此背景图片。</p>
<p>
	<b>背景图片定位数值获取：</b>
	<p>向左“拖动”，向上“拖动”这些这PS获取图文教程：详细内容参见：<a href="http://www.divcss5.com/rumen/r767.shtml" target="_blank">http://www.divcss5.com/rumen/r767.shtml</a></p>
	<img src="img/1_141201152504_1.png" title="背景图片定位数值获取"/>
	<p>通过ps软件利用切片工具画出要显示图片区域后，双击即可弹出“切片详细卡”，可以得到X（靠左距离值），Y（靠上距离值）即可获得对应图片素材在大图中位置。</p>
</p>
<p>======================================================================</p>
		<div class="democont">
			<span class="nav image1"></span>
			<span class="nav image2"></span>
			<span class="nav image3"></span>
			<span class="nav image4"></span>
			<span class="nav image5"></span>
			<span class="nav image6"></span>
		</div>
		<p>======================================================================</p>
		<div class="democont">
			<span class="nav image01"></span>
			<span class="nav image02"></span>
			<span class="nav image03"></span>
			<span class="nav image04"></span>
			<span class="nav image05"></span>
			<span class="nav image06"></span>
		</div>
		<p>======================================================================</p>
		<!--div.democont2>ul>li[class="image$"]*6>span{$文章标识}-->
		<div class="democont2">
			<ul>
				<li><i class="image1"></i><span>警示文章标识</span></li>
				<li><i class="image2"></i><span>Word文章标识</span></li>
				<li><i class="image3"></i><span>Excel文章标识</span></li>
				<li><i class="image4"></i><span>PPT文章标识</span></li>
				<li><i class="image5"></i><span>PDF文章标识</span></li>
				<li><i class="image6"></i><span>文本文章标识</span></li>
			</ul>
		</div>
	</div>
</body>
</html>